<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '提油订单',
    navigationStyle: 'custom',
    enablePullDownRefresh: true,
    backgroundTextStyle: 'dark',
    'app-plus': {
      bounce: 'none', // 禁用 iOS 弹性效果
    },
  },
}
</route>

<template>
  <PageLayout
    class="order-page-layout"
    navTitle="提油订单列表"
    navLeftText=""
    :navLeftArrow="false"
  >
    <view class="order-page">
      <!-- 自定义导航栏 -->
      <!-- <view class="custom-navbar">
        <view class="navbar-content">
          <text class="navbar-title">订单中心</text>
        </view>
      </view> -->

      <!-- 页面内容 -->
      <view class="order-content">
        <ExtractOrderList />
      </view>
      <wd-backtop :scrollTop="scrollTop"></wd-backtop>
    </view>
  </PageLayout>
</template>

<script setup lang="ts">
import ExtractOrderList from './components/extractOrderList.vue'
defineOptions({
  options: {
    styleIsolation: 'shared',
  },
})

// 订单页面逻辑（待开发）
const tab = ref<number>(0)
const tabbar = ref(0)
const scrollTop = ref<number>(0)
onPageScroll((e) => {
  scrollTop.value = e.scrollTop
})
</script>

<style scoped lang="scss">
.order-page-layout {
  height: auto;
  :deep(.pageLayout) {
    height: auto;
  }
  :deep(.wd-tabbar-item__body-title) {
    font-size: 14px;
  }
}
.order-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.custom-navbar {
  height: 44px;
  background-color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 999;
}

.navbar-content {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.navbar-title {
  font-size: 18px;
  font-weight: 600;
  color: #333333;
}

.development-notice {
  background: #ffffff;
  border-radius: 12px;
  padding: 40px 20px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.notice-icon {
  margin-bottom: 20px;
}

.icon-order {
  font-size: 64px;
  color: #ff6b00;
  display: inline-block;
  width: 80px;
  height: 80px;
  line-height: 80px;
  border-radius: 50%;
  background-color: rgba(255, 107, 0, 0.1);
}

.notice-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.title {
  font-size: 20px;
  font-weight: 600;
  color: #333333;
}

.subtitle {
  font-size: 16px;
  color: #ff6b00;
  font-weight: 500;
}

.notice-description {
  font-size: 14px;
  color: #999999;
  line-height: 1.5;
}

.placeholder-section {
  margin-top: 20px;
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.placeholder-item {
  margin-bottom: 16px;

  &:last-child {
    margin-bottom: 0;
  }
}

.placeholder-line {
  height: 20px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  border-radius: 4px;
  animation: loading 1.5s ease-in-out infinite;

  &:nth-child(1) {
    width: 100%;
  }

  &:nth-child(2) {
    width: 80%;
  }

  &:nth-child(3) {
    width: 60%;
  }
}

@keyframes loading {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: 200px 0;
  }
}

.filter {
  display: flex;
  align-items: center;
  padding: 10px;
  justify-content: space-between;
  background: #fff;
  border-bottom: 1px solid #c3c3c3;
  .filter-btns {
    display: flex;
    align-items: center;
    .wd-radio-group {
      padding: 0;
      .wd-radio {
        padding: 0;
        width: auto;
        font-size: 12px !important;
        .wd-radio__label {
        }
      }
    }
    .time-range {
      display: flex;
      align-items: center;
    }
  }
}
</style>
